<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background: #000;
            margin: 100px auto 0;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box"></div>


    <script src="../js/jquery.js"></script>
    <script>
        let box = document.querySelector(".box");
        let fire = (e) => {
            e = e || event;
            let a = Math.random() * 800;
            let b = Math.random() * 400;
            let x = a;
            let y = b;

            let div = document.createElement("div");
            $(div).css({
                width: 10,
                height: 10,
                position: "absolute",
                left: x,
                bottom: 0,
                borderRadius: "50%",
                background: "#fff"
            })
            box.appendChild(div);
            $(div).animate({
                top: y,
            }, 1000)
            setTimeout(() => {
                div.remove();
                for (let i = 0; i < 360; i = i + 12) {
                    let div1 = document.createElement("div");
                    $(div1).css({
                        width: 10,
                        height: 10,
                        position: "absolute",
                        left: x,
                        top: y,
                        borderRadius: "50%",
                        background: col()
                    })
                    box.appendChild(div1);
                    $(div1).animate({
                        top: Math.sin(i) * 80 + y + ((Math.random() * 22).toFixed(2) * 1),
                        left: Math.cos(i) * 80 + x + ((Math.random() * 22).toFixed(2) * 1),
                    }, 1000)
                    setTimeout(() => {
                        div1.remove()
                    }, 1100)
                }
            }, 1000)
        }

        function col() {
            let a = "#";
            for (let j = 0; j < 6; j++) {
                a += ((Math.random() * 16).toFixed(0) * 1).toString(16)
            }
            return a
        }

        let bb = () => {
            let time = setInterval(() => {
                fire()
            }, 2100)
        }
        bb()
    </script>
</body>

</html>